<template>
	<view class="contents">
		<camera device-position="back" flash="off" @stop="close" @error="error"
			style="width: 100vw; height: 85vh;position: relative;" v-if="isshow==false"></camera>
		<image :src="url" style="width: 100vw; height: 85vh;position: relative;" v-if="isshow==true"></image>
		<view class="box"></view>
		<view class="footer" v-if="isshow==false">
			<view class="button" @click="takePhoto">
				<view class="circle">
					<view class="circles"></view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="isshow==true">
			<view class="concel" @click="cancel">
				<image src="../../../static/button/refresh.png" style="width: 60%;height: 60%;margin:20% 20%"></image>
			</view>
			<view class="request" @click="submit">
				<image src="../../../static/button/upload.png" style="width: 60%;height: 60%;margin:20% 20%"></image>
			</view>
		</view>
		<view class="meng" v-show="sta">
			<view class="tan">
				<view class="tan1">
					<view class="header">
						<h1>识别结果</h1>
					</view>
					<view class="content">
						<view class="" v-for="item in data1" :key="item.name">
							<h3>{{item.name}}</h3>
						
							<text>描述:{{item.lajitip}}</text>

						</view>
					</view>
					<view class="bottom">
						<button style="width: 100%;border-radius: 10px;background: #2bcddd;color: white;"
							@click="onbtn">确定</button>
					</view>
				</view>
			</view>
			<view class="scd" @click="onbtn">
				X
			</view>
		</view>
	</view>
</template>
<script>
	import {
		onHide,
		onShow
	} from '@dcloudio/uni-app'
	export default {
		data() {
			return {
				isshow: false,
				url: "",
				sta: false,
				data1: [{
						name: "人物特写",
						trust: 0.755907,
						lajitype: 4,
						lajitip: "人物特写的垃圾分类系统暂时无法判别，请重新尝试拍摄物体的主要特征。"
					},
					{
						name: "医生",
						trust: 0.592136,
						lajitype: 4,
						lajitip: "医生的垃圾分类系统暂时无法判别，请重新尝试拍摄物体的主要特征。"
					},
					{
						name: "护理人员",
						trust: 0.398251,
						lajitype: 4,
						lajitip: "护理人员的垃圾分类系统暂时无法判别，请重新尝试拍摄物体的主要特征。"
					},
					{
						name: "中医科",
						trust: 0.233172,
						lajitype: 4,
						lajitip: "中医科的垃圾分类系统暂时无法判别，请重新尝试拍摄物体的主要特征。"
					},
					{
						name: "女孩",
						trust: 0.073757,
						lajitype: 4,
						lajitip: "女孩的垃圾分类系统暂时无法判别，请重新尝试拍摄物体的主要特征。"
					},
				]

			}
		},
		methods: {
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.isshow = true
						uni.uploadFile({
							url: "http://127.0.0.1:7890/zhy/upload",
							filePath: res.tempImagePath,
							name: "file",
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data)
								this.url = `${uploadFileRes.data}`
							}
						})
					}
				});
			},
			error(e) {
				console.log(e.detail);
			},
			close(e) {
				console.log(e)
			},
			cancel() {
				this.url = ""
				this.isshow = false
			},
			submit() {
				uni.request({
					url: "http://127.0.0.1:7890/zhy/relation",
					method: "POST",
					data: {
						img: this.url
					},
					success: (res) => {
						console.log(res.data.data.newslist)
						this.sta = true
						this.data1 = res.data.data.newslist
					}
				})
			},
			onbtn() {
				this.sta = false
				this.isshow = false
				this.url = ""
			},
			out() {

				this.sta = true
			},
			btn() {

				this.sta = !this.sta
			},
			mark(e) {
				this.sta = true
			},

		},
		onShow() {
			this.isshow = false
		},
		onHide() {
			this.isshow = true
		}
	}
</script>
<style lang="scss" scoped>
	.contents {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .6);
	}

	.box {
		width: 77%;
		height: 65vh;
		position: absolute;
		top: 0;
		border: 50px solid rgba(0, 0, 0, .6);

	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 22vh;
		background: white;
		border-radius: 40% 40% 0 0;
		z-index: 1;

	}

	.footer .button {
		width: 20%;
		height: 50%;
		background: #2bcddd;
		margin: 6vh auto;
		border-radius: 50%;
		box-shadow: 0px 3px 5px rgba(0, 0, 0, .6);
		position: relative;
	}

	.footer .button .circle {
		position: absolute;
		width: 40%;
		height: 40%;
		/* background: rebeccapurple; */
		top: 27%;
		left: 27%;
		border-radius: 50%;
		border: 2px solid white;
	}

	.footer .button .circle .circles {
		width: 30%;
		height: 30%;
		background: white;
		margin: 1vh auto;
		border-radius: 50%;
	}

	.concel {
		width: 15%;
		height: 40%;
		background: #ff6e8f;
		margin: 6vh 20%;
		border-radius: 50%;
		box-shadow: 0px 3px 5px rgba(0, 0, 0, .6);
		position: relative;

	}

	.request {
		width: 15%;
		height: 40%;
		background: #ffc12d;
		margin: -14.5vh 60%;
		border-radius: 50%;
		box-shadow: 0px 3px 5px rgba(0, 0, 0, .6);

	}

	.meng {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;

		/* 半透明黑色背景 */
		.tan {
			width: 80%;
			height: 88vh;
			background-color: white;
			border-radius: 25px;
			position: fixed;
			top: 5%;
			left: 10%;
			z-index: 999;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
			/* 加上阴影效果 */

			.tan1 {
				.header {
					position: relative;
					width: 100%;
					height: 7vh;
					text-align: center;
					font-size: 18px;
					line-height: 6vh;

				}

				.content {
					width: 90%;
					height: 14vh;
					padding-left: 5%;
				}

				.bottom {
					display: flex;
					position: absolute;
					bottom: 4vh;
					width: 85%;
					left:5%;
					justify-content: space-between;

				}
			}
		}

		.scd {
			width: 5vh;
			height: 5vh;
			border-radius: 50%;
			position: fixed;
			bottom: 0vh;
			left: 25vh;
			background-color: salmon;
			text-align: center;
			line-height: 4.5vh;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			border: 1 solid white;
		}
	}
</style>